<template>
  <div>
    <Header @find="search"></Header>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table :data="tableData" style="width: 100%" height="542px" row-style="height:50px" border>
        <el-table-column type="index" :index="getIndex" width="150" label="序号"/>
        <el-table-column prop="distributionTaskOrderId"  label="任务号"/>
<!--        <el-table-column prop="customerName" width="150px" label="客户姓名"/>-->
<!--        <el-table-column prop="commodityId" width="200px" label="商品ID"/>-->
<!--        <el-table-column prop="commodityNum" width="100px" label="商品数量"/>-->
<!--        <el-table-column prop="address" width="300px" label="投递地址"/>-->
<!--        <el-table-column sortable prop="overTime" width="200px" label="要求完成日期"/>-->
        <el-table-column label="任务类型">
          <template v-slot="scope">
            <el-tag effect="dark" size="large" type="success" v-if="scope.row.taskType === '送货'">送货</el-tag>
            <el-tag effect="dark" size="large"  v-else-if="scope.row.taskType==='收款'">收款</el-tag>
            <el-tag effect="dark" size="large" type="info" v-else-if="scope.row.taskType==='退货'">退货</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskType==='换货'">换货</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskType==='送货收款'">送货收款</el-tag>

          </template>
        </el-table-column>
        <el-table-column label="任务状态">
          <template v-slot="scope">
            <el-tag effect="dark" size="large"  v-if="scope.row.taskState === '可分配'">可分配</el-tag>
            <el-tag effect="dark" :hit="false" type="success" size="large"  class="co1" v-else-if="scope.row.taskState==='可调度'">可调度</el-tag>
            <el-tag effect="dark" size="large" type="warning" v-else-if="scope.row.taskState==='已分配'">已分配</el-tag>
            <el-tag effect="dark" size="large" type="warning" class="co2" v-else-if="scope.row.taskState==='已领货'">已领货</el-tag>
            <el-tag effect="dark" size="large" type="success" v-else-if="scope.row.taskState==='完成'">完成</el-tag>
            <el-tag effect="dark" size="large" type="info" v-else-if="scope.row.taskState==='失败'">失败</el-tag>

          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" fixed="right">
          <template #default="scope">

<!--            <el-button :icon="MoreFilled" circle  @click = "search1"/>-->
            <el-button  round size="default"  plain color="#97d578" @click="look(scope.row)">详情信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          layout="total, prev, pager, next"
          :total=totalSize
          @current-change="pageChange"
          style="margin-top: 15px"
          :current-page=pageNow
      >
      </el-pagination>

      <el-dialog v-model="Visible" title="详情信息" width="60%" center>
          <el-descriptions
              class="margin-top"
              :column="2"
              :size="size"
              border
              style="margin-bottom: 20px"
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <user />
                  </el-icon>
                  客户姓名
                </div>
              </template>
              {{data.customerName}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <Timer />
                  </el-icon>
                  要求到达日期
                </div>
              </template>
              {{data.overTime}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <location />
                  </el-icon>
                  配送地址
                </div>
              </template>
              {{data.address}}
            </el-descriptions-item>
          </el-descriptions>
          <div style="margin-left: 5px;margin-bottom: 10px">
            <span style="font-size: 15px">商品信息:</span>

          </div>
          <el-table :data="goodsData" border>
            <el-table-column type="index" :index="getIndex" width="150" label="序号"/>
            <el-table-column prop="shoppingCode"  label="商品代码"/>
            <el-table-column prop="shoppingName"  label="商品名称"/>
            <el-table-column prop="shoppingPrice"  label="商品价格"/>
          </el-table>

          <div style="margin-left: 5px;margin-bottom: 10px;margin-top: 10px">
            <span style="font-size: 15px">物流状态:</span>
            <el-tag style="margin-left: 20px" type="error" v-show="pstate == 0">失败</el-tag>
          </div>

          <el-steps style="margin-top: 20px" :active="pstate" finish-status="success" v-show="pstate != 0">
            <el-step title="可调度" />
            <el-step title="可分配" />
            <el-step title="已分配" />
            <el-step title="已领货" />
            <el-step title="完成" />
          </el-steps>


          <el-progress
              :percentage="70"
              :stroke-width="15"
              status="exception"
              striped
              striped-flow="true"
              :duration="4"
              style="margin-left: 10px"
              v-show="pstate == 0"
          />

      </el-dialog>


    </el-scrollbar>
  </div>
</template>

<script>
import Header from '@/components/Header'
import axios from "axios";
import { MoreFilled,Edit,Search,Van } from '@element-plus/icons-vue';
export default {
  name: "FindTaskList",
  components: {Header},
  data() {
    return {
      MoreFilled,
      tableData:[
      ],
      status:'',
      type:'',
      typecase:['送货收款','收款','送货','退货','换货'],
      tvalue:'',
      pageSize:10,
      totalSize:100,
      pageNow:1,
      id:'',
      Visible:false,
      data:{},
      pstate:0,
      goodsData:[]
    }
  },
  methods:{
    search(input,status,tvalue,type){
      this.id = input
      this.status = status;
      this.tvalue = tvalue;
      this.type = type;
      console.log(1)
      axios.post("http://localhost:1060/taskOrder/findByConditions",{
        status:status,
        date:tvalue,
        type:type,
        pageNow:1,
        pageSize:this.pageSize,
        distributionTaskOrderId:this.id,
        isReceipt:1
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
        } else {
          this.tableData = []
          this.totalSize = 0
        }

      })

    },
    look(row){
      console.log(row)
      if(row.taskState == '可调度') this.pstate = 1;
      if(row.taskState == '可分配') this.pstate = 2;
      if(row.taskState == '已分配') this.pstate = 3;
      if(row.taskState == '已领货') this.pstate = 4;
      if(row.taskState == '完成') this.pstate = 5;
      if(row.taskState == '失败') this.pstate = 0;

      let formData = new FormData();
      formData.append('oid',row.orderId)
      axios.post("http://localhost:1060/taskOrder/findShopping",formData).then(res=>{
        res=res.data;
        console.log(res)
        this.goodsData = res.data
      })

      this.Visible = true
      this.data = row
    },
    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1060/taskOrder/findByConditions",{
        status:this.status,
        date:this.tvalue,
        type:this.type,
        pageNow:this.pageNow,
        pageSize:this.pageSize,
        isReceipt:1
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        }else {
        }

      })
    },
    search1() {
    },
    loadPost(){
      this.$axios.post("http://localhost:1060/taskOrder/findAll",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    }
  },
  beforeMount() {
    this.loadPost()
  }
}
</script>

<style scoped>
  body .el-table th.gutter {
    display: table-cell !important
  }
  .co1{
    background: #77c7d0;

  }
  .co2{
    background: #d9bf17;
  }
  .oo{
    background: #97d578
  }
</style>